import './MaSearch.css'
import { useEffect, useState, useRef, createRef } from "react";
import { LeftOutlined } from '@ant-design/icons';
import { useNavigate, useSearchParams } from "react-router-dom"
import { Rate, Divider, Space, Button, Radio, message, Modal, Avatar } from 'antd';
import { getDetail, getSameGoods, getCartAdd } from "../../tools/ajax";
export default () => {
    const navigate = useNavigate()
    const desc = ['1', '2', '3', '3', '4'];
    const [value, setValue] = useState(3);
    const [search] = useSearchParams()
    const [mains, setMains] = useState(false)
    const [url, setUrl] = useState("")

    const [goodsData, setGoodsData] = useState({});
    const [goodsImgs, setGoodsImgs] = useState([]);

    const hello = useRef()
    const manage = createRef()
    const large = createRef()

    const [messageApi, contextHolder] = message.useMessage();


    const small = (url) => {
        // console.log(url, "1111");
        setUrl(url)
    }

    useEffect(function () {
        getGoodsData();
        setGoodsImgs(goodsImgs)
    }, [])
    const enter = () => {
        setMains(true)
    }
    const leave = () => {
        setMains(false)
    }
    const move = (e) => {
        if (manage.current) {
            let X = e.nativeEvent.offsetX
            let Y = e.nativeEvent.offsetY
            // 调整临界点
            if (X <= 100) {
                X = 100;
            }
            if (X >= 398) {
                X = 398
            }
            if (Y <= 100) {
                Y = 100;
            }
            if (Y >= 300) {
                Y = 300
            }
            manage.current.style.left = X - 100 + 'px';
            manage.current.style.top = Y - 100 + 'px';

            large.current.style.marginLeft = -X * 2 + 200 + 'px';
            large.current.style.marginTop = -Y * 2 + 200 + 'px';

        }
    }

    const getGoodsData = () => {
        getDetail({ goodId: search.get("id") }).then((res) => {
            console.log("id", res.data[0]);
            setGoodsImgs([...JSON.parse(res.data[0].imgs)])
            setGoodsData(res.data[0]);
        })
    }

    const add = () => {
        console.log("加入购物车");
        if (sessionStorage.getItem('setToken')) {
            getCartAdd({
                goodId: goodsData.Id,
                token: sessionStorage.getItem('setToken'),
            }).then(res => {
                console.log("data", res.data);

                if (res.data.code == 0) {
                    messageApi.open({
                        type: 'warning',
                        content: '登录过期,要去登录页喽~~',
                    });
                    setTimeout(() => {
                        navigate("/login");
                    }, 2000);
                } else if (res.data.code == 1) {
                    messageApi.open({
                        type: 'success',
                        content: '添加成功',
                    });
                } else {
                    messageApi.open({
                        type: 'error',
                        content: '添加失败,请稍后再试',
                    });
                    this.$message.error("");
                }
            })
        } else {
            messageApi.open({
                type: 'warning',
                content: '快去登录!八嘎雅鹿~~',
            });
            setTimeout(() => {
                navigate("/login");
            }, 2000)
        }
    }


    return <div className="conrneg">
        {contextHolder}
        <div className="detail-box">
            <Button onClick={() => navigate(-1)} icon={<LeftOutlined />}>返回</Button>
            <div className='detail-main' >
                <div className='left' onMouseMove={move}>
                    {
                        mains ? <div id="mask" ref={manage} onMouseMove={(e) => { e.stopPropagation() }}></div>
                            : ""
                    }
                    <img src={url ? url : goodsImgs[0]} alt="" className='imgs' onMouseEnter={enter} onMouseLeave={leave} />

                    {
                        goodsImgs.map((item, i) => {
                            if (i > 0) {
                                return (
                                    <img className='imgss' src={item} alt="" key={i} onClick={() => { small(item) }} />
                                )
                            }
                        })
                    }

                    {
                        mains ?
                            <div className='bigBox' onMouseEnter={enter} onMouseLeave={leave}>
                                <img src={url ? url : goodsImgs[0]} alt="" className='big' ref={large} />
                            </div>
                            : ""
                    }
                </div>

                <div className='right'>
                    <div className='rights'>
                        <h2 className='title' >{goodsData.title}</h2>
                        <p className="supplier">{goodsData.supplier}</p>
                        <p className="price">￥{goodsData.priceStr}</p>
                        <span>
                            <Rate tooltips={desc} onChange={setValue} value={value} />
                            {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
                        </span>
                        <Button type="primary" danger onClick={add}>
                            加入购物车
                        </Button>
                    </div>
                </div>
            </div>
        </div>
        <section>
            <p className="title">相似商品推荐</p>
        </section>
    </div>
}